<script setup>
import { ref } from "vue";
import "@material/web/icon/icon.js";
import "@material/web/iconbutton/icon-button.js";
import "@material/web/button/text-button.js";
import { listUser } from "@/api/user";
import MaterialTable from "@/components/MaterialTable.vue";
import UserItem from "./UserItem.vue";
import AddUserDialog from "./AddUserDialog.vue";
import EditUserDialog from "./EditUserDialog.vue";
import DeleteUserDialog from "./DeleteUserDialog.vue";
import MaterialDialog from "@/components/MaterialDialog.vue";
import SnackBar from "@/components/SnackBar.vue";
import ErrorSnackBar from "@/components/ErrorSnackBar.vue";
import LoadingLayer from "@/components/LoadingLayer.vue";

const users = ref([]);
const addUserOpened = ref(false);
const editUserOpened = ref(false);
const editingUser = ref(null);
const deleteUserOpened = ref(false);
const deletingUser = ref(null);
const snackBarMessage = ref(null);
const failed = ref(false);
const dialogMessage = ref(null);
const loading = ref(false);
const userError = ref(undefined);

function editUser(user) {
  editUserOpened.value = true;
  editingUser.value = user;
}

function deleteUser(user) {
  deleteUserOpened.value = true;
  deletingUser.value = user;
}

async function requireUsers() {
  try {
    loading.value = true;
    users.value = await listUser();
  } catch (ex) {
    userError.value = ex;
  } finally {
    loading.value = false;
  }
}

requireUsers();

</script>

<template>
  <div class="user-manage-table">
    <MaterialTable>
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="users-body">
        <LoadingLayer fill :loading="loading"></LoadingLayer>
        <UserItem v-for="user in users" :key="user.id" :user="user" @edit="editUser" @delete="deleteUser">
        </UserItem>
        <tr>
          <td colspan="3">
            <md-text-button @click="addUserOpened = true">
              新建用户
            </md-text-button>
          </td>
        </tr>
      </tbody>
    </MaterialTable>
    <AddUserDialog :open="addUserOpened" @close="addUserOpened = false"
      @error="message => { failed = true; dialogMessage = { title: '用户添加失败', message } }" @done="requireUsers">
    </AddUserDialog>
    <EditUserDialog :user="editingUser" :open="editUserOpened" @close="editUserOpened = false"
      @error="message => { failed = true; dialogMessage = { title: '用户修改失败', message } }"
      @done="() => { requireUsers(); snackBarMessage = { message: '用户修改成功' } }">
    </EditUserDialog>
    <DeleteUserDialog :user="deletingUser" :open="deleteUserOpened" @close="deleteUserOpened = false"
      @error="message => { failed = true; dialogMessage = { title: '用户删除失败', message } }" @done="requireUsers">
    </DeleteUserDialog>
    <MaterialDialog :open="failed" @close="failed = false">
      <template #headline>
        {{ dialogMessage?.title }}
      </template>

      <template #content>
        <form id="failed-dialog" method="dialog">
          {{ dialogMessage?.message }}
        </form>
      </template>

      <template #actions>
        <md-text-button autofocus type="submit" form="failed-dialog">确定</md-text-button>
      </template>
    </MaterialDialog>

    <SnackBar :show="snackBarMessage != null" @close="snackBarMessage = null">
      {{ snackBarMessage?.message }}
    </SnackBar>

    <ErrorSnackBar :error="userError"></ErrorSnackBar>
  </div>
</template>

<style scoped>
#loading-layer {
  width: 100%;
  height: 100%;
}

.user-manage-table tr,
.user-manage-table tr {
  white-space: nowrap;
}

.user-manage-table>table {
  width: 100%;
}

.user-manage-table tbody {
  position: relative;
}
</style>

<style>
.user-manage-table td:nth-child(2),
.user-manage-table th:nth-child(2) {
  text-align: left;
  width: 100%;
}
</style>